<template>
  <div
    id="s"
    style="
      display: flex;
      background-color: aliceblue;
      width: 100%;
      height: 200px;
      align-items: center;
    "
  >
    <div class="s1">
      <div class="s11"></div>
    </div>
    <div class="s2">
      <div class="s21"></div>
      <div class="s22"></div>
    </div>
    <div class="s3">
      <div class="s31"></div>
      <div class="s32"></div>
      <div class="s33"></div>
    </div>
    <div class="s4">
      <div class="s41"></div>
      <div class="s42"></div>
      <div class="s43"></div>
      <div class="s44"></div>
    </div>
    <div class="s5">
      <div class="s51"></div>
      <div class="s52"></div>
      <div class="s53"></div>
      <div class="s54"></div>
      <div class="s55"></div>
    </div>
    <div class="s6">
      <div class="s61"></div>
      <div class="s62"></div>
      <div class="s63"></div>
      <div class="s64"></div>
      <div class="s65"></div>
      <div class="s66"></div>
    </div>
    <div class="s7">
      <div class="s71"></div>
      <div class="s72"></div>
      <div class="s73"></div>
      <div class="s74"></div>
      <div class="s75"></div>
      <div class="s76"></div>
      <div class="s77"></div>
    </div>
    <div class="s8">
      <div class="s81"></div>
      <div class="s82"></div>
      <div class="s83"></div>
      <div class="s84"></div>
      <div class="s85"></div>
      <div class="s86"></div>
      <div class="s87"></div>
      <div class="s88"></div>
    </div>
    <div class="s9">
      <div class="s91"></div>
      <div class="s92"></div>
      <div class="s93"></div>
      <div class="s94"></div>
      <div class="s95"></div>
      <div class="s96"></div>
      <div class="s97"></div>
      <div class="s98"></div>
      <div class="s99"></div>
    </div>
  </div>
</template>

<style scoped>
#s .s1,
.s2,
.s3,
.s4,
.s5,
.s6,
.s7,
.s8,
.s9 {
  border: 2px solid #eb382a;
  display: flex;
  width: 100px;
  height: 100px;
  margin-left: 20px;
}
.s1 {
  justify-content: center;
  align-items: center;
}
.s1 .s11 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
}
.s2 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.s2 .s21,
.s22 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
}
.s3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s3 .s31,
.s32,
.s33 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
}
.s31 {
  position: relative;
  bottom: 28%;
  left: 16%;
}
.s33 {
  position: relative;
  top: 28%;
  right: 16%;
}

.s4 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.s4 .s41,
.s42,
.s43,
.s44 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
  position: relative;
}
.s41 {
  bottom: 26%;
  right: 0%;
}
.s42 {
  bottom: 26%;
  left: 40%;
}
.s43 {
  top: 26%;
  left: -40%;
}
.s44 {
  top: 26%;
  right: 0%;
}
.s5 {
  display: flex;
  align-items: center;
}
.s5 .s51,
.s52,
.s53,
.s54,
.s55 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
  position: relative;
}
.s51 {
  left: 10%;
  bottom: 30%;
}
.s52 {
  top: 30%;
  right: 10%;
}
.s54 {
  left: 10%;
  bottom: 30%;
}
.s55 {
  right: 10%;
  top: 30%;
}
.s6 {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 14px;
}
.s6 .s61,
.s62,
.s63,
.s64,
.s65,
.s66 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
}
.s61 {
  margin-top: 5px;
}
.s64 {
  margin-top: 5px;
}
.s7 {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 14px;
}
.s7 .s71,
.s72,
.s73,
.s74,
.s75,
.s76,
.s77 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
  position: relative;
}
.s71 {
  margin-top: 5px;
}
.s72 {
  bottom: -34%;
  left: 76%;
}
.s74 {
  margin-top: 5px;
}
.s77 {
  margin-top: 5px;
}
.s8 {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 14px;
}
.s8 .s81,
.s82,
.s83,
.s84,
.s85,
.s86,
.s87,
.s88 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
  position: relative;
}
.s81 {
  margin-top: 6%;
}
.s87 {
  margin-top: 6%;
}
.s84 {
  margin-top: 6%;
}
.s85 {
  left: 38%;
}
.s88 {
  top: 34%;
}
.s9 {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 14px;
}
.s9 .s91,
.s92,
.s93,
.s94,
.s95,
.s96,
.s97,
.s98,
.s99 {
  border-radius: 50%;
  background-color: black;
  width: 20px;
  height: 20px;
  position: relative;
}
.s91 {
  margin-top: 6%;
}
.s97 {
  margin-top: 6%;
}
.s94 {
  margin-top: 6%;
}
</style>
